<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<!--使用名为viewport的meta值，其content指定自适应设备的宽度--> 
<meta name="viewport"  content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>使用网格打造九宫格</title>
</head>

<body>
<!--指定页面使用内置的e主题-->
<div data-role="page" id="pageone" data-theme="e">
  <div data-role="header">
  <h1>选择导航按钮</h1>
  </div>
  <div data-role="content">
   <p>简单的九宫格界面模拟</p>
   <div class="ui-grid-b">    <!---使用ui-grid-b来布局界面，表示必须有3列，必须由a、b、c三个ui-block组成-->     
     <div class="ui-block-a"> <!--第1行 第1列-->
        <a href="#" data-role="button" data-corners="false" data-icon="arrow-l" data-iconpos="top">方位</a>
     </div>
     <div class="ui-block-b"> <!--第1行 第2列-->
       <a href="#" data-role="button" data-corners="false" data-icon="delete" data-iconpos="top">删除</a>
     </div>
     <div class="ui-block-c"> <!--第1行 第3列-->
       <a href="#" data-role="button" data-corners="false" data-icon="arrow-r" data-iconpos="top">返程</a>
     </div>
     <!--开始第2行-->
     <div class="ui-block-a"> <!--第2行 第1列-->
        <a href="#" data-role="button" data-corners="false" data-icon="home" data-iconpos="top">首页</a>   
     </div>
     <div class="ui-block-b"> <!--第2行 第2列-->
       <a href="#" data-role="button" data-corners="false" data-icon="back" data-iconpos="top">返回</a>
     </div>
     <div class="ui-block-c"> <!--第2行 第3列-->
       <a href="#" data-role="button" data-corners="false" data-icon="search" data-iconpos="top">搜索</a>
     </div>
     <!--开始第3行-->     
     <div class="ui-block-a"> <!--第3行 第1列-->
       <a href="#" data-role="button" data-corners="false" data-icon="home" data-iconpos="top">首页</a>   
     </div>
     <div class="ui-block-b"> <!--第3行 第2列-->
       <a href="#" data-role="button" data-corners="false" data-icon="back" data-iconpos="top">返回</a>
     </div>
     <div class="ui-block-c"> <!--第3行 第3列-->
       <a href="#" data-role="button" data-corners="false" data-icon="search" data-iconpos="top">搜索</a>
     </div>          
   </div>
  </div>
</div> 

</body>
</html>
